<template>
  <div class="main_column">
    <el-form
      :inline="true"
      class="wrap_form"
      :model="form"
      label-width="80px"
      label-position="left"
    >
      <div class="flex_row flex_between flex_a_center">
        <div class="form_title">
          <h3>综合统计</h3>
          <p>统计截至时间:{{ endData | formatDate }}</p>
        </div>

        <div class="seat">
          <ul class="flex_row">
            <li
              v-for="(item, i) in seatList"
              :key="i"
              class="flex_row flex_a_center"
              @click="seatCick(item)"
              :style="item.type ? 'color:#fff' : 'color:#ccc'"
            >
              <span :class="item.type ? `seat${i + 1}` : 'seatnone'"></span>
              {{ item.name }}
            </li>
            <!-- <li class="flex_row flex_a_center">
              <span class="seat1"></span>
              席位1
            </li>
            <li class="flex_row flex_a_center">
              <span class="seat2"></span>
              席位2
            </li>
            <li class="flex_row flex_a_center">
              <span class="seat3"></span>
              席位3
            </li> -->
          </ul>
        </div>
        <!-- 搜索组 -->
        <div class="Search_group">
          <el-form-item label="管制单位" class="flex_row">
            <el-select v-model="form.label" filterable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围" class="flex_row">
            <el-date-picker
              v-model="form.data"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button class="icon-short-btn" @click="SearchBtn()">
              统计
            </el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="main_chart flex_row">
      <!--str 左-->
      <div class="chart_content flex_column">
        <div class="chart_view flex_column">
          <div class="chart_title flex_row flex_between">
            <SvgTitle :title="'指令类别占比'" />
            <el-radio-group v-model="group" size="mini">
              <el-radio-button :label="0">本年</el-radio-button>
              <el-radio-button :label="1">本季度</el-radio-button>
              <el-radio-button :label="2">本月</el-radio-button>
              <el-radio-button :label="3">今日</el-radio-button>
            </el-radio-group>
          </div>
          <div class="web_chart">
            <PieChart />
          </div>
        </div>

        <div class="chart_view flex_column" style="margin: 10px 0;">
          <div class="chart_title flex_row flex_between">
            <SvgTitle :title="'管制语速'" />
          </div>
          <div class="web_chart">
            <RBarChart />
          </div>
        </div>
        <div class="chart_view flex_column">
          <div class="chart_title">
            <SvgTitle :title="'指令更正数量'" />
          </div>
          <div class="web_chart">
            <LineChart />
          </div>
        </div>
      </div>
      <!--end 左 -->

      <!-- str 中 -->
      <div class="chart_content flex_column" style="margin: 0 9px;">
        <div class="chart_view flex_column">
          <div class="chart_title">
            <SvgTitle :title="'统计指标概览'" />
          </div>
          <div class="web_chart">
            <RadarChart />
          </div>
        </div>
        <div class="chart_view flex_column" style="margin-top: 9px;">
          <div class="chart_title flex_row flex_between">
            <div>
              <SvgTitle :title="'波占比'" />
            </div>
            <div>
              <el-radio-group v-model="group2" size="mini">
                <el-radio-button :label="0">本年</el-radio-button>
                <el-radio-button :label="1">本季度</el-radio-button>
                <el-radio-button :label="2">本月</el-radio-button>
                <el-radio-button :label="3">今日</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="web_chart">
            <WaveChart :titleName="'席位'" />
          </div>
          <div class="web_chart">
            <WaveChart :titleName="'席位(昨日环比)'" />
          </div>
        </div>
      </div>
      <!--end 中 -->

      <!-- str 右 -->
      <div class="chart_content flex_column">
        <div class="chart_view flex_column">
          <div class="chart_title">
            <SvgTitle :title="'席位均值'" />
          </div>
          <div class="web_chart flex_row">
            <ul class="average_chart flex_column flex_between flex_a_center">
              <li class="flex_column flex_a_center">
                管制指令
                <span>
                  <i>73</i>
                  条
                  <i>1173</i>
                  字
                </span>
              </li>
              <li class="flex_column flex_a_center">
                近1小时平均语速
                <span>
                  <i>51</i>
                  字/分钟
                </span>
              </li>
              <li class="flex_column flex_a_start">
                管制意图识别率
                <div class="linDiv">
                  <div
                    class="linDiv_content"
                    :style="`width:${linwidth}%`"
                  ></div>
                </div>
                <span style="text-align: end;">82.20%</span>
              </li>
            </ul>
            <ul class="average_chart flex_column flex_between flex_a_center">
              <li class="flex_column">
                累计指挥
                <span>
                  <i>40</i>
                  架次
                </span>
              </li>
              <li class="flex_column">
                当前语速
                <span>
                  <i>46</i>
                  字/分钟
                </span>
              </li>
              <li class="flex_column flex_a_start">
                解决冲突指令
                <div class="linDiv">
                  <div
                    class="linDiv_content"
                    :style="`width:${linwidth}%`"
                  ></div>
                </div>

                <span style="text-align: end;">10.70%</span>
              </li>
            </ul>
            <ul class="average_chart flex_column flex_between">
              <li>
                <SaturatedChart />
              </li>
              <li>
                <SaturatedChart />
              </li>
              <li>
                <SaturatedChart />
              </li>
            </ul>
          </div>
        </div>
        <div class="chart_view flex_column" style="margin: 10px 0;">
          <div class="chart_title">
            <SvgTitle :title="'指令规范性占比'" />
          </div>
          <div class="web_chart">
            <RingChart />
          </div>
        </div>
        <div class="chart_view flex_column">
          <div class="chart_title">
            <SvgTitle :title="'语音时长'" />
          </div>
          <div class="web_chart">
            <BarChart />
          </div>
        </div>
      </div>
      <!-- end 右 -->
    </div>
  </div>
</template>

<script>
import {} from '@/api/index'
import '@/utils/dateUtil'
import SvgTitle from '@/components/svgTitle.vue'
import RBarChart from '@/components/statisticsChart/rbarChart.vue'
import BarChart from '@/components/statisticsChart/barChart.vue'
import PieChart from '@/components/statisticsChart/pieChart.vue'
import LineChart from '@/components/statisticsChart/lineChart.vue'
import RadarChart from '@/components/statisticsChart/radarChart.vue'
import RingChart from '@/components/statisticsChart/ringChart.vue'
import WaveChart from '@/components/statisticsChart/waveChart.vue'
import SaturatedChart from '@/components/statisticsChart/saturatedChart.vue'

export default {
  components: {
    SvgTitle,
    BarChart,
    RBarChart,
    PieChart,
    LineChart,
    RadarChart,
    RingChart,
    WaveChart,
    SaturatedChart,
  },
  data() {
    return {
      linwidth: 82.2,
      endData: new Date(),
      loading: false,
      group: 3, // 周期
      group2: 3, // 周期
      form: {
        label: '', //管制单位
        data: [], //时间范围
      },
      seatList: [
        {
          name: '席位1',
          type: true,
        },
        {
          name: '席位2',
          type: true,
        },
        {
          name: '席位3',
          type: true,
        },
      ],
      options: [
        {
          label: '单位1',
          value: '1',
        },
      ],
    }
  },

  // 路由钩子
  mounted() {},

  methods: {
    // 点击事件
    seatCick(item) {
      item.type = !item.type
    },
    SearchBtn() {},
  },
}
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>
